<template>
    <el-row>
        <el-table :data="tableData" style="width: 100%" border :header-cell-style="headerCellStyle" v-loading="loading"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
           <el-table-column prop="name" header-align="center" align="center" label="课程名称">
           </el-table-column>
           <el-table-column prop="material" header-align="center" align="center" label="出版社">
           </el-table-column>
           <el-table-column  header-align="center" align="center" label="出版社">
               <template slot-scope="scope">
                   <span v-if="!scope.row.image" style="font-size: 12px;font-style: italic;">无图片</span>
                     <el-image v-else
                       style="width: 80px; height: 25px"
                       :src="scope.row.image"
                       :preview-src-list="[scope.row.image]">
                     </el-image>
               </template>
           </el-table-column>
           <el-table-column fixed="right" header-align="center" align="center" width="240" label="操作">
               <template slot-scope="scope">
                   <el-popconfirm title="确定设为推荐课程吗?" @confirm="() => handleAddCourse(scope.row.id)">
                       <el-button type="text" slot="reference">设为推荐课程</el-button>
                   </el-popconfirm>
               </template>
           </el-table-column>
        </el-table>
    </el-row>
</template>

<script>
    import {
        wyv3post,
        wyv3put,
        getActionv3
    } from '@/http/axios.js';
    import {
        JVxeTableModelMixin
    } from '@/utils/course/JVxeTableModelMixin.js'

    export default {
        name: 'CourseManageForm',
        mixins: [JVxeTableModelMixin],
        data() {
            return {
                tableData:[],
                headerCellStyle:{backgroundColor:`#fafafa`,color:`#000`},
                loading:false,
                url: {
                    add: "/tjkc"
                },
                pages:{
                    rows:10,
                    page:1
                },
                form:{}
            }
        },
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        computed: {
            formDisabled() {
                return this.disabled
            },
        },
        created() {},
        methods: {
            edit(record){
                this.form.id = record.tjkcid
            },
            //运营管理员获取公共课程
            getCmoCourse() {
                let params = {
                    ...this.pages
                }
                delete params.total
                this.$api.wyv3.getCmoCousList(params).then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data.records;
                        this.pages.rows = res.data.size
                        this.pages.page = res.data.current
                        // console.log(this.cousList,'this.cousListthis.cousListthis.cousList-----')
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            //设为推荐课程
            handleAddCourse(id){
                this.form.cousid = id
                let url = this.url.add;
                if (this.form.id) {
                    /* ------后台需要支持所有参数修改---------- */
                    /* ------不然没法统一封装---------- */
                    wyv3put(url, this.form).then(res => {
                        console.log(res);
                        if (res.code === 200) {
                            this.$emit('ok')
                            this.$message.success(res.message)
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
                else{
                    wyv3post(url, this.form).then(res => {
                        console.log(res);
                        if (res.code === 200) {
                            this.$emit('ok')
                            this.$message.success(res.message)
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
        }
    }
</script>

<style scoped>
    /deep/.avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    /deep/.avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    /deep/.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    /deep/.avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
